<template>
	<view class="page">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">创建班级</view>
			<view class="header-right"></view>
		</view>

		<view class="content">
			<view class="form-section">
				<view class="form-item">
					<text class="form-label">班级名称</text>
					<input class="form-input" v-model="classForm.name" placeholder="请输入班级名称" />
				</view>

				<view class="form-item">
					<text class="form-label">学科</text>
					<input class="form-input" v-model="classForm.subject" placeholder="请输入学科名称" />
				</view>

				<view class="form-item">
					<text class="form-label">年级</text>
					<input class="form-input" v-model="classForm.grade" placeholder="请输入年级" />
				</view>

				<view class="form-item">
					<text class="form-label">班级简介</text>
					<textarea class="form-textarea" v-model="classForm.description" placeholder="请输入班级简介"></textarea>
				</view>

				<view class="form-item">
					<text class="form-label">学期</text>
					<input class="form-input" v-model="classForm.semester" placeholder="例如：2023年春季学期" />
				</view>

				<view class="form-item">
					<text class="form-label">班级封面图</text>
					<view class="cover-upload" @tap="chooseCoverImage">
						<image v-if="classForm.coverImage" :src="classForm.coverImage" class="cover-preview"></image>
						<view v-else class="cover-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">点击上传封面图</text>
						</view>
					</view>
				</view>
			</view>

			<button class="submit-btn" type="primary" @tap="createClass">创建班级</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const classForm = ref({
		name: '',
		subject: '',
		grade: '',
		description: '',
		semester: '',
		coverImage: ''
	});

	const createClass = () => {
		if (!classForm.value.name) {
			uni.showToast({
				title: '请输入班级名称',
				icon: 'none'
			});
			return;
		}

		if (!classForm.value.subject) {
			uni.showToast({
				title: '请输入学科',
				icon: 'none'
			});
			return;
		}

		if (!classForm.value.grade) {
			uni.showToast({
				title: '请输入年级',
				icon: 'none'
			});
			return;
		}

		if (!classForm.value.semester) {
			uni.showToast({
				title: '请输入学期',
				icon: 'none'
			});
			return;
		}

		// 模拟创建班级
		uni.showLoading({
			title: '创建中...'
		});

		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '班级创建成功',
				icon: 'success'
			});

			// 返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}, 1500);
	};

	const chooseCoverImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				classForm.value.coverImage = res.tempFilePaths[0];
				uni.showToast({
					title: '封面图选择成功',
					icon: 'success'
				});
			},
			fail: () => {
				uni.showToast({
					title: '选择封面图失败',
					icon: 'none'
				});
			}
		});
	};

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.header-left,
	.header-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.content {
		padding: 30rpx;
	}

	.form-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background-color: #f8f9fa;
	}

	.form-input:focus {
		border-color: #1976D2;
		outline: none;
	}

	.form-textarea {
		width: 100%;
		height: 160rpx;
		border: 1rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		resize: none;
		background-color: #f8f9fa;
	}

	.form-textarea:focus {
		border-color: #1976D2;
		outline: none;
	}

	.cover-upload {
		width: 100%;
		height: 300rpx;
		border: 2rpx dashed #dee2e6;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background-color: #f8f9fa;
		transition: all 0.3s ease;
	}

	.cover-upload:hover {
		border-color: #1976D2;
		background-color: #e9f0f8;
	}

	.cover-preview {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.cover-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 28rpx;
		color: #6c757d;
		margin-top: 20rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		background-color: #1976D2;
		color: #fff;
		font-weight: 500;
	}
	
	.submit-btn:active {
		background-color: #1565c0;
	}
</style>